{% extends "RihabBundle::layout.html.twig" %}
{% block titre %}Stage{% endblock %}
{% block css %}
{{parent()}}
<link rel="stylesheet" href="/js/vendor/datepicker/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="/js/vendor/chosen/css/chosen.min.css">
<link rel="stylesheet" href="/js/vendor/chosen/css/chosen-bootstrap.css">
{% endblock %}
{% block body %}
<div class="main">
    <div class="row">
        <div id="form-type" class="col-md-12">

            <section class="tile color transparent-black">
                <div class="tile-header">
                    <h1><strong>{% if id =='' %}Nouveau{% else %}Modifier{% endif %}</strong> Stage</h1>
                    <div class="controls">
                        <a class="refresh" href="#"><i class="fa fa-refresh"></i></a>
                        <a class="remove" href="#"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="tile-body">
                    <form id="form-type-stage" action="{{path('stage_stage_new')}}" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01">Type</label>
                            <div class="col-sm-8">
                        {{form_widget(form.type,{'attr':{'class':'form-control'}})}}{{form_widget(form._token)}}
                                <input type="hidden" value="{{id}}" name="id" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01">Sujet</label>
                            <div class="col-sm-8">
                        {{form_widget(form.sujet,{'attr':{'class':'form-control'}})}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01">Description</label>
                            <div class="col-sm-8">
                        {{form_widget(form.description,{'attr':{'class':'form-control'}})}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01">Date Debut</label>
                            <div class="col-sm-8">
                        {{form_widget(form.dateDebut,{'attr':{'class':'form-control'}})}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01">Date Fin</label>
                            <div class="col-sm-8">
                        {{form_widget(form.dateFin,{'attr':{'class':'form-control'}})}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01">Etudiants</label>
                            <div class="col-sm-8">
                        {{form_widget(form.etudiants,{'attr':{'class':'form-control'}})}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01">Encadreur</label>
                            <div class="col-sm-8">
                        {{form_widget(form.encadreur,{'attr':{'class':'form-control'}})}}
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" for="input01"><button type="button" onclick="addEnseignant()">Ajouter</button>Enseignants</label>
                            <div class="col-sm-8">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th >Enseignant</th>
                                            <th >Role</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="list-enseignant" data-prototype="{% filter escape %}{% include 'StageBundle:Stage:form_enseignant.html.twig' with {'form': form.enseignants.vars.prototype} %}{% endfilter %}">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="form-group form-footer">
                            <div class="col-sm-offset-4 col-sm-8">
                                <button class="btn btn-primary" type="submit">Submit</button>
                                <button class="btn btn-default" type="reset">Reset</button>
                            </div>
                        </div>

                    </form>

                </div>
            </section>
        </div>
    </div>
</div>

{% endblock %}

{% block js %}
{{parent()}}
<script src="/js/vendor/momentjs/moment-with-langs.min.js"></script>
<script src="/js/vendor/datepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/jquery.validate.js"></script>
<script>
    index = 0
    function addEnseignant(){
        var prototype=$('#list-enseignant').attr('data-prototype')
        prototype=prototype.replace(/__name__/g,index)
        $('#list-enseignant').append(prototype)
        index++
    }
    function deleteEnseignant(index){
        $('tr_'+index).remove()
    }
    $('#stage_stagebundle_stage_dateDebut').datetimepicker({
        pickTime: false,
        language: "fr-FR",
        onClose: function(selectedDate) {
            $("#stage_stagebundle_stage_dateFin").datetimepicker("option", "minDate", selectedDate);
        }
    })
    $('#stage_stagebundle_stage_dateFin').datetimepicker({
        pickTime: false,
        language: "fr-FR",
        onClose: function(selectedDate) {
            $("#stage_stagebundle_stage_dateDebut").datetimepicker("option", "maxDate", selectedDate);
        }
    })
    $('#form-type-stage').validate({
        rules: {
            "stage_stagebundle_stage[sujet]": {
                required: true,
                minlength: 4
            },
            "stage_stagebundle_stage[description]": {
                required: true,
                minlength: 4
            },
            "stage_stagebundle_stage[date debut]": {
                required: true
            },
            "stage_stagebundle_stage[date fin]": {
                required: true
            }
        },
        messages: {
            "stage_stagebundle_stage[sujet]": {
                required: "Le champ sujet estun champ taxte",
                minlength: "Le champ sujet est contenu ou moins un caractére"

            },
            "stage_stagebundle_stage[description]": {
                required: "Le champ descrition est un champs texte",
                minlength: "Le champ description est contenu ou moins un caractére"

            },
            "stage_stagebundle_stage[Date Debut]": {
                required: "Le champ date dubut est doit étre inferieur à date fin"


            },
            "stage_stagebundle_stage[Date Fin]": {
                required: "Le champ date fin est un champs date doit superieur à la date debut"

            }
        }
    })

    resetForm()

    function resetForm() {
        $('#form-type-stage input').val('')
    }
</script>
{% endblock %}